<template>
	<view class="index">
		<view class="top">
			<up-avatar :src="baseUrl+userProfile.u_img_url" size="83"></up-avatar>
			<view>
				<p style="font-size: 14px;margin-bottom: 4px;">{{userProfile.u_name}}</p>
			</view>
			<view style="display: flex;">
				<view class="top-text">
					{{userProfile.u_tel}}
				</view>
				<view class="top-button" @click="to_myinfo_update">修改</view>
			</view>
		</view>
		<view class="center">
			<view class="item" @click="to_myinfo_update">
				<image src="http://test.zshawk.top/static/img/my/write.png" mode="" style="width: 24px;height: 24px;">
				</image>
				<view style="margin-left: 15px;">个人信息</view>
			</view>
			<view class="item" @click="to_shipping_address">
				<image src="http://test.zshawk.top/static/img/my/address.png" mode="" style="width: 24px;height: 24px;">
				</image>
				<view style="margin-left: 15px;">收货地址</view>
			</view>
			<view class="item" @click="to_customer_service">
				<image src="http://test.zshawk.top/static/img/my/about.png" mode="" style="width: 24px;height: 24px;">
				</image>
				<view style="margin-left: 15px;">关于吾之老</view>
			</view>
			<!-- 			<view class="item" @click="to_historical_orders">
				<image src="http://test.zshawk.top/static/img/my/订单2.png" mode="" style="width: 24px;height: 24px;"></image>
			 </view> -->
		</view>

	</view>
	<!-- <wxLogin></wxLogin> -->
	<!-- <wxpay></wxpay> -->
</template>

<script setup>
	import {
		baseUrl
	} from '@/common/api/config.js'
	import {
		reactive,computed,watch
	} from 'vue';
	import {
		useUserStore,
	} from '@/stores'
	
	watch(
	  () => useUserStore().profile,
	  (newValue, oldValue) => {
		Object.assign(userProfile, newValue)
	  },
	  { deep: true }
	)
	
	const userProfile = reactive(useUserStore().profile)
	const to_myinfo_update = () => {
		uni.navigateTo({
			url: "/subpkg/myinfo/myinfo_update/myinfo_update?u_id=" + userProfile.u_id
		})
		console.log("信息修改");
	}
	// const to_historical_orders=()=>{
	// 	uni.navigateTo({
	// 		url:"/subpkg/myinfo/historical_orders/historical_orders?u_id="+userProfile.u_id
	// 	})	
	// 	console.log("历史订单");
	// }
	const to_shipping_address = () => {
		uni.navigateTo({
			url: "/subpkg/myinfo/shipping_address/shipping_address?u_id=" + userProfile.u_id
		})
		console.log("收货地址");
	}
	const to_customer_service = () => {
		uni.navigateTo({
			url: "/subpkg/myinfo/customer_service/customer_service"
		})
		console.log("联系客服");
	}
</script>

<style scoped lang="scss">
	.top {
		padding-top: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

	}
	
	.top-text{
		padding-top: 5px;
		text-align: center;
		font-size: 24rpx;
	}

	.top-button {
		margin-left: 7px;
		background-color: #F2F2F2;
		border-radius: 12px;
		padding: 5px 5px;
		text-align: center;
		font-size: 24rpx;
		width: 50px;
	}

	.center {
		margin-top: 60rpx;
	}

	.item {
		border-bottom: 2px solid #F4F4F4;
		padding: 17px;
		padding-left: 33px;
		display: flex;
		font-size: 15px;
	}
</style>